<template>
	<div class="detail">
		<nav-bar 
			@navBarClick="navBarClick"
			:cur-index="curIndex"
			/>
		<scroll 
				class="detail-scroll" 
				ref="scroll"
				:probeType="probeType"
				@scroll="scroll"
				@scrollEnd="scrollEnd"
			>
			<detail-swiper :image-list="imageList"/>
			<goods-info :Goods="Goods"/>
			<shop-info :shop="shop"/>
			<image-list 
				:detail-info="detailInfo"
				@imgLoad="imgLoad"
				/>
			<goods-size :goods-size="goodsSize" ref="goodsSize"/>
			<comments :comments="rate" ref="comments"/>
			<recommend 
				:recommend="recommendList"
				@recommendImg="recommendImg"
				ref="recommend"
			/>
			<div class="bottom"></div>
		</scroll>
		<detail-tab-bar :to-cart="toCart"/>
		<back-top 
				class="back-top" 
				v-show="isShow"
				@click.native="backClick"
			/>
			<!-- 监听组件的原生事件时，用修饰符.native以使用 -->
	</div>
</template>

<script>
	import NavBar from './detailComps/NavBar'
	import DetailSwiper from './detailComps/DetailSwiper'
	import {detailSwiper,Goods,Shop,recommend,Cart} from 'network/detail.js'
	import GoodsInfo from './detailComps/GoodsInfo'
	import scroll from 'components/common/scroll/scroll'
	import ShopInfo from './detailComps/ShopInfo'
	import ImageList from './detailComps/ImageList'
	import GoodsSize from './detailComps/GoodsSize'
	import Comments from './detailComps/Comments'
	import Recommend from './detailComps/Recommend'
	import backTop from 'components/content/backTop/backTop'
	import DetailTabBar from './detailComps/DetailTabBar'
	export default {
		name:'detail',
		data(){
			return {
				iid:null,
				imageList:[],
				Goods:{},
				shop:{},
				detailInfo:{},
				goodsSize:{},
				rate:{},
				recommendList:[],
				isShow:false,
				themeTopY:[],
				curIndex:0,
				probeType:3,
				toCart:{}
			}
		},
		components:{
			NavBar,
			DetailSwiper,
			GoodsInfo,
			scroll,
			ShopInfo,
			ImageList,
			GoodsSize,
			Comments,
			Recommend,
			backTop,
			DetailTabBar
		},
		created() {
			this.iid = this.$route.query.id;
			detailSwiper(this.iid).then(res=>{
				let result = res.data.result;
				let itemInfo = result.itemInfo;
				this.imageList = itemInfo.topImages;
				this.Goods = new Goods(result.columns,itemInfo,result.shopInfo.services)
				this.shop = new Shop(result.shopInfo);
				this.detailInfo = result.detailInfo;
				this.goodsSize = result.itemParams;
				this.rate = result.rate;
				//获取去购物车的数据
				this.toCart = new Cart(itemInfo);
				
			})
			//请求推荐数据
			recommend(this.iid).then(res=>{
				this.recommendList = res.data.data.list;
			})

		},
		updated() {
			this.$nextTick(()=>{
				this.getThemeTop();
			})
		},
		methods:{
			imgLoad(){
				this.getThemeTop();
				this.$refs.scroll.refresh();
			},
			recommendImg(){
				this.$refs.scroll.refresh();
			},
			scroll(position){
				if( Math.abs(position) > 1000 ){
					this.isShow = true
				}else {
					this.isShow = false
				};
			},
			scrollEnd(position){
				//滚动时动态判断位置
				this.getCurIndex(position)
			},
			backClick(){
				this.$refs.scroll.scroll.scrollTo(0,0,1000)
			},
			getThemeTop(){
				this.themeTopY = [];
				this.themeTopY.push(0);
				this.themeTopY.push(this.$refs.goodsSize.$el.offsetTop);
				this.themeTopY.push(this.$refs.comments.$el.offsetTop);
				this.themeTopY.push(this.$refs.recommend.$el.offsetTop);
			},
			navBarClick(index){
				this.$refs.scroll.scroll.scrollTo(0,-this.themeTopY[index],1000);
			},
			getCurIndex(pos){
				if( Math.abs(pos) >= this.themeTopY[3] ){
					this.curIndex = 3
				}else if( Math.abs(pos) >= this.themeTopY[2] ){
					this.curIndex = 2
				}else if( Math.abs(pos) >= this.themeTopY[1] ){
					this.curIndex = 1
				}else{
					this.curIndex = 0
				}
			}
		}
	}
</script>

<style scoped>
	.detail {
		position: relative;
		z-index: 1;
		height: 100vh;
		background: #FFF;
	}
	.detail-scroll{
		position: relative;
		left: 0;
		right: 0;
		top: 0;
		padding-top: 44px;
		overflow: hidden;
	}
	.bottom {
		width: 100vw;
		height: 93px;
	}
	
</style>
